<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calm Tasks - Add Task</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }
        .neumorphic {
            background: #f1f5f9;
            box-shadow: 
                20px 20px 60px #d1d9e6, 
                -20px -20px 60px #ffffff;
            border-radius: 20px;
            border: 1px solid rgba(255,255,255,0.2);
        }
        .neumorphic-inset {
            background: #f1f5f9;
            box-shadow: 
                inset 8px 8px 16px #d1d9e6, 
                inset -8px -8px 16px #ffffff;
            border-radius: 15px;
        }
        .neumorphic-small {
            background: #f1f5f9;
            box-shadow: 
                8px 8px 16px #d1d9e6, 
                -8px -8px 16px #ffffff;
            border-radius: 15px;
        }
        .status-bar {
            background: linear-gradient(90deg, #000 0%, #333 100%);
            height: 44px;
        }
        .tab-bar {
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(20px);
            border-top: 1px solid rgba(0, 0, 0, 0.05);
        }
        .anxiety-level-btn {
            transition: all 0.3s ease;
        }
        .anxiety-level-btn.selected {
            transform: scale(1.05);
            box-shadow: 0 8px 25px rgba(0,0,0,0.15);
        }
        .category-btn {
            transition: all 0.3s ease;
        }
        .category-btn.selected {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            transform: scale(1.02);
        }
        input, textarea {
            background: transparent;
            outline: none;
        }
        input::placeholder, textarea::placeholder {
            color: #9ca3af;
        }
    </style>
</head>
<body class="h-screen overflow-hidden">
    <!-- iOS Status Bar -->
    <div class="status-bar flex justify-between items-center px-6 text-white text-sm font-medium">
        <div class="flex items-center space-x-1">
            <span>9:41</span>
        </div>
        <div class="flex items-center space-x-1">
            <i class="fas fa-signal text-xs"></i>
            <i class="fas fa-wifi text-xs"></i>
            <i class="fas fa-battery-three-quarters text-xs"></i>
        </div>
    </div>

    <!-- Main Content -->
    <div class="flex-1 p-6 pb-24 overflow-y-auto" style="height: calc(100vh - 44px - 83px);">
        <!-- Header -->
        <div class="flex items-center justify-between mb-8">
            <button class="neumorphic-small w-12 h-12 flex items-center justify-center">
                <i class="fas fa-arrow-left text-gray-600"></i>
            </button>
            <div class="text-center">
                <h1 class="text-xl font-bold text-gray-800">Add New Task</h1>
                <p class="text-sm text-gray-600">Take it one step at a time</p>
            </div>
            <div class="w-12"></div> <!-- Spacer for centering -->
        </div>

        <!-- Task Input -->
        <div class="neumorphic p-6 mb-6">
            <h3 class="text-lg font-semibold text-gray-800 mb-4">What would you like to accomplish?</h3>
            <div class="neumorphic-inset p-4 mb-4">
                <input 
                    type="text" 
                    placeholder="e.g., Call dentist for appointment"
                    class="w-full text-gray-800 text-lg"
                    value=""
                >
            </div>
            <div class="neumorphic-inset p-4">
                <textarea 
                    placeholder="Add any notes or details (optional)"
                    class="w-full text-gray-700 resize-none"
                    rows="3"
                ></textarea>
            </div>
        </div>

        <!-- Anxiety Level Selection -->
        <div class="neumorphic p-6 mb-6">
            <h3 class="text-lg font-semibold text-gray-800 mb-4">How does this task feel to you?</h3>
            <p class="text-sm text-gray-600 mb-6">Be honest - this helps us support you better</p>
            
            <div class="grid grid-cols-3 gap-4">
                <button class="anxiety-level-btn neumorphic-inset p-4 text-center">
                    <div class="text-3xl mb-2">😌</div>
                    <p class="text-sm font-medium text-gray-800">Low Anxiety</p>
                    <p class="text-xs text-gray-500 mt-1">Feels manageable</p>
                </button>
                
                <button class="anxiety-level-btn neumorphic-inset p-4 text-center selected bg-yellow-100 border-2 border-yellow-300">
                    <div class="text-3xl mb-2">😰</div>
                    <p class="text-sm font-medium text-yellow-800">Medium Anxiety</p>
                    <p class="text-xs text-yellow-600 mt-1">A bit challenging</p>
                </button>
                
                <button class="anxiety-level-btn neumorphic-inset p-4 text-center">
                    <div class="text-3xl mb-2">😨</div>
                    <p class="text-sm font-medium text-gray-800">High Anxiety</p>
                    <p class="text-xs text-gray-500 mt-1">Very challenging</p>
                </button>
            </div>
        </div>

        <!-- Category Selection -->
        <div class="neumorphic p-6 mb-6">
            <h3 class="text-lg font-semibold text-gray-800 mb-4">Category</h3>
            <div class="grid grid-cols-2 gap-3">
                <button class="category-btn neumorphic-inset p-4 flex items-center space-x-3">
                    <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
                        <i class="fas fa-user text-blue-600"></i>
                    </div>
                    <span class="font-medium text-gray-800">Personal</span>
                </button>
                
                <button class="category-btn neumorphic-inset p-4 flex items-center space-x-3 selected">
                    <div class="w-10 h-10 bg-white rounded-full flex items-center justify-center">
                        <i class="fas fa-users text-white"></i>
                    </div>
                    <span class="font-medium">Social</span>
                </button>
                
                <button class="category-btn neumorphic-inset p-4 flex items-center space-x-3">
                    <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center">
                        <i class="fas fa-briefcase text-purple-600"></i>
                    </div>
                    <span class="font-medium text-gray-800">Work</span>
                </button>
                
                <button class="category-btn neumorphic-inset p-4 flex items-center space-x-3">
                    <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center">
                        <i class="fas fa-heart text-green-600"></i>
                    </div>
                    <span class="font-medium text-gray-800">Health</span>
                </button>
            </div>
        </div>

        <!-- Due Date & Time -->
        <div class="neumorphic p-6 mb-6">
            <h3 class="text-lg font-semibold text-gray-800 mb-4">When would you like to do this?</h3>
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="text-sm text-gray-600 mb-2 block">Date</label>
                    <div class="neumorphic-inset p-3 flex items-center space-x-2">
                        <i class="fas fa-calendar text-gray-500"></i>
                        <input type="date" class="flex-1 text-gray-800" value="2024-03-15">
                    </div>
                </div>
                <div>
                    <label class="text-sm text-gray-600 mb-2 block">Time (optional)</label>
                    <div class="neumorphic-inset p-3 flex items-center space-x-2">
                        <i class="fas fa-clock text-gray-500"></i>
                        <input type="time" class="flex-1 text-gray-800" value="14:00">
                    </div>
                </div>
            </div>
        </div>

        <!-- Helpful Tips (for medium/high anxiety tasks) -->
        <div class="neumorphic p-6 mb-6 bg-gradient-to-r from-yellow-50 to-orange-50 border-l-4 border-yellow-400">
            <div class="flex items-start space-x-3">
                <div class="w-8 h-8 bg-yellow-100 rounded-full flex items-center justify-center flex-shrink-0 mt-1">
                    <i class="fas fa-lightbulb text-yellow-600 text-sm"></i>
                </div>
                <div>
                    <h4 class="font-semibold text-yellow-800 mb-2">Helpful Tips for This Task</h4>
                    <ul class="text-sm text-yellow-700 space-y-1">
                        <li>• Write down what you want to say before calling</li>
                        <li>• Practice the conversation in your head first</li>
                        <li>• Remember: they want to help you</li>
                        <li>• Take deep breaths before dialing</li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- Action Buttons -->
        <div class="space-y-4">
            <button class="w-full bg-gradient-to-r from-blue-500 to-purple-600 text-white py-4 rounded-xl font-medium text-lg shadow-lg hover:shadow-xl transition-all">
                Add Task
            </button>
            
            <button class="w-full neumorphic py-4 rounded-xl font-medium text-gray-700 hover:shadow-xl transition-all">
                Save as Draft
            </button>
        </div>

        <!-- Encouragement -->
        <div class="mt-6 text-center">
            <p class="text-sm text-gray-600">🌟 Every task you add is a step toward growth</p>
        </div>
    </div>

    <!-- Tab Bar -->
    <div class="tab-bar fixed bottom-0 left-0 right-0 h-20 flex items-center justify-around px-6">
        <div class="flex flex-col items-center space-y-1">
            <i class="fas fa-home text-gray-400 text-lg"></i>
            <span class="text-xs text-gray-400">Home</span>
        </div>
        <div class="flex flex-col items-center space-y-1">
            <i class="fas fa-tasks text-blue-600 text-lg"></i>
            <span class="text-xs text-blue-600 font-medium">Tasks</span>
        </div>
        <div class="flex flex-col items-center space-y-1">
            <i class="fas fa-smile text-gray-400 text-lg"></i>
            <span class="text-xs text-gray-400">Mood</span>
        </div>
        <div class="flex flex-col items-center space-y-1">
            <i class="fas fa-chart-line text-gray-400 text-lg"></i>
            <span class="text-xs text-gray-400">Progress</span>
        </div>
        <div class="flex flex-col items-center space-y-1">
            <i class="fas fa-cog text-gray-400 text-lg"></i>
            <span class="text-xs text-gray-400">Settings</span>
        </div>
    </div>
</body>
</html>